<!-- TAG标签 -->
<template>
    <div class="route">
        <div class="route_left" ref="container" style="position: relative;">
            <el-tag v-for="(item, index) in routeList" :key="index" :type="isActive(item.fullPath) ? 'primary' : 'success'"
                class="tabsClass" closable effect="dark" @close="closeTag(index)" >
                <router-link :to="item.fullPath"  style="color: white;" >
                    {{ item.title }}
                </router-link>
            </el-tag>
        </div>
        <div class="route_right">
            <el-dropdown size="mini" @command="handleTags">
                <el-button type="primary" >
                    标签快捷操作
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="all">关闭所有标签</el-dropdown-item>
                        <el-dropdown-item command="other">关闭其他标签</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import router from '@/router';
import { onMounted, ref, watch } from 'vue'

interface routeListfc {
    title: string;
    fullPath: string
}

const container = ref(null)
// 路由数据
const routeList = ref<routeListfc[]>([])
let userJsonStr = ref<any>('')

// 判断所点击TAG标签是否存在
const isActive = (path: string): boolean => {
    return path === router.currentRoute.value.fullPath
}

// 关闭标签
const handleTags = (command: string) => {
    command === 'all' ? closeAll() : closeOther()
}

// 关闭所有
const closeAll = () => {
    routeList.value = []
    window.sessionStorage.clear();
    router.push('/index')
}

// 关闭其他
const closeOther = () => {
    let currentList = routeList.value.filter((ele) => {
        return ele.fullPath === router.currentRoute.value.fullPath
    })
    routeList.value = currentList
}

//  关闭TAG标签的事件
const closeTag = (index: number): void => {
    // 删除数据
    routeList.value.splice(index, 1)[0]
    // 存储值：将对象转换为Json字符串
    window.sessionStorage.setItem('tag', JSON.stringify(routeList));
}

onMounted(() => {
    console.log('routeList', routeList.value);
    // 把本地的TAG标签读取
    userJsonStr.value = window.sessionStorage.getItem('tag') ? JSON.parse(window.sessionStorage.getItem('tag') || '') : null;
    if (userJsonStr.value === null) {
        return
    } else {
        routeList.value = userJsonStr.value._value
    }
})



watch(
    () => router.currentRoute.value,
    (newValue) => {
        console.log(12121, newValue);
        // 接收到存起来
        let obj2: routeListfc = {
            title: String(newValue?.meta?.title || ''),
            fullPath: newValue.fullPath,
        }
        // 判断是否重复，如不重复则添加进去，已有此标签的话则不操作。
        if (routeList.value.findIndex(item => item.fullPath === obj2.fullPath) === -1) {
            routeList.value.push(obj2)
            return
        } else {
            // 存在的话  对应的tabs设置高亮 
            // do something
            console.log('已存在');
        }
        // 存储值：将对象转换为Json字符串
        window.sessionStorage.setItem('tag', JSON.stringify(routeList));

    }
)



</script>
<style lang="scss">
.tabsClass {
    margin: 0px 0 0 10px;
}

.router-link-active {
    color: white;
}
.route {
    width: 100%;
    // background-color: #fff;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    height: 50px;
    // margin-top: 5px;
    position: relative;
    border-radius: 2px;
    white-space: nowrap;
    background-color: rgb(168, 194, 221);
}

.route_left {
    width: 92%;
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}

.route_right {
    position: absolute;
    right: 120px;
}
</style>